<template>
	<w-container :loading="loading" class="page-bg plr-16 pt-16	">
		<w-navbar id='my-nav' bgColor="#fff" title="我要委托"></w-navbar>
		<view class="pa-10 br-12 bg-color-item">
			<view class="flex flex-ai-center">
				<w-image radius="12" :src='info.listimg' width="83" height="83"></w-image>
				<view class="flex-dir-col flex flex-js-sb pl-16 flex-1">
					<view class="font-color-textPrimary font-w-600">{{info.name}}</view>
				</view>
			</view>
		</view>

		<view class="pa-10 br-12 bg-color-item mt-16">
			<view class="flex flex-ai-center">
				<text class="font-w-500 font-color-textPrimary">委托价格</text>
			</view>
			<view class="flex inp flex-js-sb font-color-222 mt-16">
				<view class="flex flex-js-sb font-size-20 flex-ai-center font-color-222 " style="width: 350rpx;">
					￥<input class="font-size-16" v-model="form.price" type="number" @input='priceInput'
						:placeholder="'请输入价格'">
				</view>
			</view>
			<view class="font-color-999 flex flex-ai-center  font-size-12 mt-16 ">
				<text>当前藏品可委托最高限价:</text>
				<text class="font-color-black">￥{{info.reprice_limit}}</text>
				<u-icon class="ml-8" name='reload' @click='getInfo(true)' color="#222"></u-icon>
				<text style="margin-left: auto;color: #E71B1B;" class="font-size-16 font-w-500"
					@click="form.price = info.reprice_limit">使用价格</text>
			</view>
			<view class="flex flex-js-sb flex-ai-center number-box mt-16">
				<view class="font-color-black font-size-14">委托数量</view>
				<u-number-box v-model="form.num">
					<view slot="minus" class="minus">
						<w-icon name="minus-active" size="18"></w-icon>
					</view>
					<input type="number" :value="form.num" />
					<view slot="plus" class="plus">
						<w-icon name="add-active" size="18"></w-icon>
					</view>
				</u-number-box>
			</view>
		</view>

		<view class="pay-list pa-16 bg-color-item mt-16 br-12">
			<view class="ptb-12 flex flex-js-sb flex-ai-center" v-for="item in payList" :key="item.auth_key"
				@click="targetCheck(item)">
				<view class="flex">
					<w-icon :name="item.icon" size="24"></w-icon>
					<text class="pl-12 font-color-textPrimary">{{item.name && handleLang(item.name)}}</text>
				</view>
				<view class="" v-if="item.able">
					<w-icon v-show='item.check' name="checkmark-circle-fill" size="16"></w-icon>
					<w-icon v-show='!item.check' name="uncheck-circle-icon" size="16"></w-icon>
				</view>
				<view v-else class="font-color-white bg-color-black font-size-10 flex flex-center"
					style="width: 46px;height: 23px;border-radius: 32px" @click="toOpen">
					去开通
				</view>
			</view>
		</view>
		<!-- 		<view class="trade pa-16 bg-color-item mt-16 br-12">
			<view class="font-color-textPrimary font-w-500 font-size-14 mb-8">
				竞价说明
			</view>
			<u-parse :content='appConfig.trade_rule'></u-parse>
		</view> -->




		<view class="action bg-color-bottombtn">
			<view class="flex flex-js-sb flex-ai-center ptb-7 plr-16">
				<view class="font-color-textPrimary">
					{{handleLang('合计')}}：￥{{totalPrice}}
				</view>
				<w-button :disabled="disable" style="width: 330rpx;" @click.native='createOrder'>立即委托</w-button>
			</view>
			<u-status-bar></u-status-bar>
		</view>

		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='submit'></w-jy-verify>

	</w-container>
</template>

<script>
	import {
		getEntrustPrice,
		createEntrust
	} from '@/api/market/index.js'
	import {
		basePayList
	} from '@/config/index.js'
	import {
		mapActions,
		mapState
	} from 'vuex'
	import PayUtil from '@/utils/payUtil.js'
	export default {
		data() {
			return {
				loading: true,
				id: "",
				info: {},
				form: {
					price: '',
					num: 1
				},
				payList: []
			}
		},
		computed: {
			totalPrice() {
				if (this.form.price && this.form.num) {
					return (this.form.price * this.form.num).toFixed(2)
				}
				return '--'
			},
			disable() {
				let hasCheck = this.payList.findIndex(v => v.check) > -1
				let able = this.form.num && this.form.price && hasCheck
				return !able
			},
			...mapState('config', {
				captchaStatus(state) {
					return !!Number(state.info.batchBuy_check)
				}
			}),
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			targetCheck(item) {
				if (!item.able) return;
				this.payList = this.payList.map(v => {
					v.check = v.auth_key == item.auth_key && !item.check
					return v
				})
			},
			getInfo(isReload = false) {
				if (isReload) {
					uni.showLoading({
						title: '正在刷新'
					})
				}
				getEntrustPrice({
					collection_id: this.id
				}).then(res => {
					this.info = res.data;
					if (isReload) {
						uni.showToast({
							title: "刷新成功"
						})
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			toOpen() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},
			createOrder() {
				if(this.disable) return
				if (this.form.price < 1) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的金额'
					})
					return
				}
				if (this.captchaStatus) {
					this.$refs.captcha.showCaptcha();
				} else {
					this.submit();
				}
			},
			submit() {
				createEntrust({
					collection_id: this.id,
					pay_way: this.payList.find(v => v.check).pay_way,
					max_price: this.form.price,
					number: this.form.num
				}).then(res => {
					new PayUtil({
						pay_type: 4,
						order_number: res.data.order_sn,
						order_type: 12,
						pay_way: this.payList.find(v => v.check).pay_way,
						order_id: res.data.order_id
					})
				})
			},
		},
		onLoad({
			id
		}) {
			this.getUserInfo().then(res => {
				this.payList = basePayList.map(v => {
					v.able = !!this.userInfo[v.auth_key]
					v.check = false
					return v
				})
			})
			this.id = id
			this.getInfo()
		}
	}
</script>

<style lang="scss">
	.number-box {
		/deep/ input {
			background: none !important;
			color: #222 !important;
		}
	}

	.action {
		position: fixed;
		box-sizing: border-box;
		width: 750rpx;
		left: 0;
		bottom: 0;
	}
</style>